 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>基于Layui的轻量级问答社区页面模版</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="keywords" content="fly,layui,前端社区">
  <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
  <link rel="stylesheet" href="../../res/layui/css/layui.css">
  <link rel="stylesheet" href="../../res/css/global.css">
</head>
<body>

<div class="header">
  <div class="main">
    <a class="logo" href="/" title="Fly">Fly社区</a>
    <div class="nav">
      <a class="nav-this" href="index.html">
        <i class="iconfont icon-wenda"></i>问答
      </a>
    </div>
    
    <div class="nav-user">
      <!-- 未登入状态 -->
      <a class="unlogin" href="../user/login.html"><i class="iconfont icon-touxiang"></i></a>
      <span><a href="../user/login.html">登入</a><a href="user/reg.html">注册</a></span>
      <p class="out-login">
        <a href="" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})" class="iconfont icon-qq" title="QQ登入"></a>
        <a href="" onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})" class="iconfont icon-weibo" title="微博登入"></a>
      </p>   
      
      <!-- 登入后的状态 -->
      <!-- 
      <a class="avatar" href="user/index.html">
        <img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0">
        <cite>贤心</cite>
        <i>VIP2</i>
      </a>
      <div class="nav">
        <a href="/user/set/"><i class="iconfont icon-shezhi"></i>设置</a>
        <a href="/user/logout/"><i class="iconfont icon-tuichu" style="top: 0; font-size: 22px;"></i>退了</a>
      </div> -->
      
    </div>
  </div>
</div>

<div class="main layui-clear" id="app">
  <div class="wrap">
    <div class="content" style="margin-right:0">
      <div class="fly-tab">
        <form action="http://cn.bing.com/search" class="fly-search">
          <i class="iconfont icon-sousuo"></i>
          <input class="layui-input" autocomplete="off" placeholder="搜索内容，回车跳转" type="text" name="q">
        </form>
        <a href="add.html" class="layui-btn jie-add">发布问题</a>
      </div>
    
      <ul class="fly-list" >
        <li v-cloak v-for="(item,index) in items" class="card" @mouseenter="showClose(index)" @mouseleave="hideCole(index)">
          <div class="AuthorInfo-head" >
            <a href="user/home.html">
              <img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0" alt="">
            </a>
            <span>{{item.author}}</span>
            <div class="close" :class="index===classNum?'active':'hide'" @click="delItem(index)" title="不再关注">
              <i class="layui-icon layui-unselect layui-tab-close">ဆ</i>
            </div>
          </div>
          <div class="ContentItem-actions" >
            <div class="title">
                <a href="detail.html">{{item.title}}</a>

            </div>
            <div class="content">
              <p>
                {{item.content}}
              </p>
            </div>
            <div class="content-footer">
              <span>科技达人</span>
              <span>刚刚</span>
              <span>网络大神</span>
            </div>
          </div>
        </li>

      </ul>
      
      <!-- <div class="fly-none">并无相关数据</div> -->

      
    </div>
  </div>
</div>
<script src="../../res/layui/layui.js"></script>
<script src="https://unpkg.com/vue"></script>

<script type="text/javascript">
  var vue = new Vue({
  el: '#app',
  data: {
    classNum: -1,
    items: [
    ]
  },
  methods: {
      showClose: function(index){
        this.classNum = index;
      },
      hideCole: function(index){
        this.classNum = -1;
      },
      delItem: function(index){
        this.items.splice(index,1);
      }
    }
})

layui.use('flow', function(){
  var flow = layui.flow;
  flow.load({
    elem: '.content' //流加载容器
    ,done: function(page, next){ //执行下一页的回调
      
      //模拟数据插入
      setTimeout(function(){
        for(var i = 0; i < 3; i++){
          //lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
          vue.items.push({author: "薛以冰",title: "基于Layui的轻量级问答社区页面模版?",content: "该模版由 layui官方社区（fly.layui.com）倾情提供，只为表明我们对 layui 执着的信念、以及对未来持续加强的承诺。该模版基于 layui 搭建而成，可作为简约型问答社区的页面支撑。"});
        }
        
        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
        next("", page < 5); //假设总页数为 10
      }, 500);
    }
  });
});
</script>
<script>
layui.cache.page = 'jie';
layui.cache.user = {
  username: '游客'
  ,uid: -1
  ,avatar: '../../res/images/avatar/00.jpg'
  ,experience: 83
  ,sex: '男'
};
layui.config({
  version: "2.0.0"
  ,base: '../../res/mods/'
}).extend({
  fly: 'index'
}).use('fly');
</script>

</body>
</html>